<template>
  <div>
    <el-alert title="注意：只允许为第三级分类设置相关参数！" type="warning" show-icon></el-alert>
    <!-- 级联选择器 -->
    <div class="block">
      <span class="demonstration">选择商品分类:</span>
      <el-cascader  v-model="sortValue" :options="sortList" :props="props" @change="handleChange"></el-cascader>
    </div>
    <!-- tab切换 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="动态参数" name="many">
        <el-button type="primary" @click="addonly">添加参数</el-button>
        <!-- 动态参数表格 -->
        <el-table :data="tableData" style="width: 100%">
          <!-- 展开行 -->
          <el-table-column type="expand">
            <template slot-scope="scope">
              <!-- :disable-transitions="false"是否禁用渐变动画 
                @close="handleClose(tag) 关闭tag时触发
                click点击tag时触发的事件
                closable 是否可关闭
              -->
              <el-tag
                :key="index"
                v-for="(tag, index) in scope.row.attr_vals"
                closable
                :disable-transitions="false"
                @close="handleClose(scope.row, index)"
                >{{ tag }}</el-tag
              >
              <el-input
                class="input-new-tag"
                v-if="scope.row.inputVisible"
                v-model="scope.row.inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm(scope.row)"
                @blur="handleInputConfirm(scope.row)"
              ></el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
            </template>
          </el-table-column>
          <el-table-column label="#" type="index"> </el-table-column>
          <el-table-column label="参数名称" prop="attr_name"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row.attr_id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- ................................ -->
      <el-tab-pane label="静态属性" name="only">
        <el-button type="primary" @click="addonly">添加属性</el-button>
        <!-- 静态参数表格 -->
        <el-table :data="tableDatajing" style="width: 100%">
          <!-- 展开行 -->
          <el-table-column type="expand">
            <template  slot-scope="scope">
               <el-tag
                :key="index"
                v-for="(tag, index) in scope.row.attr_vals"
                closable
                :disable-transitions="false"
                @close="handleClose(scope.row, index)"
                >{{ tag }}</el-tag
              >
              <el-input
                class="input-new-tag"
                v-if="scope.row.inputVisible"
                v-model="scope.row.inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm(scope.row)"
                @blur="handleInputConfirm(scope.row)"
              ></el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
            </template>
          </el-table-column>
          <el-table-column label="#" type="index"> </el-table-column>
          <el-table-column label="参数名称" prop="attr_name"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row.attr_id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <!-- 添加对话框 -->
    <el-dialog title="添加动态参数" width="30%" :visible.sync="dialogVisible">
      <!-- 表单 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="活动名称" prop="attr_name">
          <el-input v-model="ruleForm.attr_name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onlybuttonok">确定</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 编辑对话框 -->
    <el-dialog
      title="添加静态属性"
      width="30%"
      :visible.sync="dialogVisibleedit"
    >
      <!-- 表单 -->
      <el-form
        :model="ruleFormedit"
        :rules="rulesedit"
        ref="ruleFormedit"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="活动名称" prop="attr_name">
          <el-input v-model="ruleFormedit.attr_name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onlybuttonokedit">确定</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  getCategories,
  getCategorieslist,
  getCategorise,
  geteditcategoriesattr,
  getCategoriesdel,
} from "../../utils/api";
export default {
  data() {
    return {
      dynamicTags: ["标签一", "标签二", "标签三"],
      inputVisible: false, //tag中input框显示与隐藏
      attr_id: "", //编辑提交用到的当前行属性id
      dialogVisibleedit: false, //编辑对话框的显示与隐藏
      dialogVisible: false, //添加的显示与隐藏
      tableDatajing: [], //添加静态表格
      activeName: "many", //参数类型
      value: [], //级联选中的id
      tableData: [], //动态表格
      sortList: [], //商品分类列表
      sortValue: [], //级联内容
      ruleFormedit: {//编辑表单
        attr_name: "", //参数名称
      },
      ruleForm: {//添加表单
        attr_name: "", //参数名称
      },
      rulesedit: {
        attr_name: [
          { required: true, message: "请输入参数名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      rules: {
        attr_name: [
          { required: true, message: "请输入参数名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      props: {
        label: "cat_name",
        value: "cat_id",
      },
      page: {
        pagenum: 1,
        pagesize: 5,
      },
    };
  },
  methods: {
    handleClose(row, i) { //关闭tag时触发的事件
      row.attr_vals.splice(i,1) //删除tag
      let obj = {
        id: row.cat_id, //父级三级id
        attrId: row.attr_id,
        attr_name: row.attr_name,
        attr_sel: row.attr_sel,
        attr_vals: row.attr_vals.join(","),
      };
      // tag中的删除和编辑一个接口
      geteditcategoriesattr(obj).then((res) => {
        console.log(res);
      });
    },

    showInput(row) {//点击butt按钮让按钮变input
      row.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.focus();
      });
    },

    handleInputConfirm(row) { //回车键盘
      // console.log(row);
      let obj = {
        id: row.cat_id, //父级三级id
        attrId: row.attr_id,
        attr_name: row.attr_name,
        attr_sel: row.attr_sel,
        attr_vals: row.attr_vals.join(","),
      };
      geteditcategoriesattr(obj).then((res) => {
        // console.log(res);
      });
      let inputValue = row.inputValue;
      if (inputValue) {
        row.attr_vals.push(inputValue);
      }
      row.inputVisible = false;
      row.inputValue = "";
    },
    addonly() { //添加参数按钮
      this.dialogVisible = true;
    },
    onlybuttonok() { //添加动态参数中的确定按钮
      let obj = {
        id: this.value[2],
        attr_name: this.ruleForm.attr_name,
        attr_sel: this.activeName,
      };
      getCategorise(obj).then((res) => {
        console.log(res);
        if (res.data.meta.status == 200) {
          this.$message({
            type: "success", // success error warning
            message: res.data.meta,
            msg,
            duration: 2000,
          });
        }
        this.fn();
        this.dialogVisible = false;
      });
    },
    onlybuttonokedit() { //编辑模态框中的确定按钮
      let obj = {
        id: this.value[2], //父级三级id
        attrId: this.attr_id,
        attr_name: this.ruleFormedit.attr_name,
        attr_sel: this.activeName,
      };
      geteditcategoriesattr(obj).then((res) => {
        console.log(res);
        if (res.data.meta.status == 200) {
          this.$message({
            type: "success", // success error warning
            message: res.data.meta.msg,
            duration: 2000,
          });
        }
        this.dialogVisibleedit = false;
        this.fn();
      });
    },
    edit(row) {//编辑按钮回填
      // console.log(row);
      this.dialogVisibleedit = true;
      this.ruleFormedit.attr_name = row.attr_name;
      this.attr_id = row.attr_id;
    },
    handleDelete(row) {
      //删除
      console.log(row);
      console.log(this.value[2]);
      getCategoriesdel({ id: this.value[2], attr_id: row }).then((res) => {
        console.log(res);
        if (res.data.meta.status == 200) {
          this.$message({
            type: "success", // success error warning
            message: res.data.meta.msg,
            duration: 2000,
          });
        }
        this.fn();
      });
    },
    handleChange(value) {
      //级联选中的id
      this.value = value;
      this.fn();
    },
    fn() {
      let obj = {
        id: this.value[2],
        sel: this.activeName,
      };
      if (this.value.length != 3) {
        this.$message({
          type: "error", // success error warning
          message: "只能选择三级商品分类",
        });
        return false;
      }
      if (this.activeName == "many") {
        //判断当前页面是否在动态参数
        getCategorieslist(obj).then((res) => {
          // console.log(res);
          res.data.data.forEach((item) => {
            item.attr_vals = item.attr_vals.split(",") || [];
            item.inputVisible = false;
            item.inputValue = [];
          });
          this.tableData = res.data.data;
          // console.log(this.tableData);
        });
      } else {
        getCategorieslist(obj).then((res) => {
          this.tableDatajing = res.data.data;
          res.data.data.forEach((item) => {
            item.attr_vals = item.attr_vals.split(",") || [];
            item.inputVisible = false;
            item.inputValue = [];
          });
        });
        this.rander();
      }
    },
    handleClick() {
      //tab切换
      console.log(this.activeName);
      if (this.activeName == "only") {
        //判断如果当前是动态参数
        console.log(123);
      }
    },
    rander() {
      getCategories(this.page).then((res) => {
        //请求练级选择器数据
        // console.log(res);
        this.sortList = res.data.data.result;
      });
    },
  },
  created() {
    this.rander();
  },
};
</script>
<style lang="scss" scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>